<template>
  <div class="min-h-screen bg-gray-50">
    <div class="px-4 pt-4">
      <nav class="text-sm text-gray-500 flex items-center space-x-2">
        <NuxtLink to="/" class="text-blue-600 hover:underline">首页</NuxtLink>
        <span>/</span>
        <span class="text-gray-700">关于我们</span>
      </nav>
    </div>
    <!-- 页面标题 -->
    <div class="text-center py-6">
      <h1 class="text-xl font-medium text-gray-900">关于我们</h1>
    </div>

    <!-- 菜单列表 -->
    <div class="p-4">
      <div class="bg-white rounded-lg overflow-hidden shadow-sm">
        <!-- 电子签章授权书 -->
        <NuxtLink
          to="/electronic-signature-authorization"
          class="flex items-center justify-between p-4 border-b border-gray-100 hover:bg-gray-50 transition-colors"
        >
          <span class="text-gray-900 font-medium">电子签章授权书</span>
          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        </NuxtLink>

        <!-- 退出登录 -->
        <button
          @click="showLogoutModalHandler"
          class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors text-left"
        >
          <span class="text-gray-900 font-medium">退出登录</span>
          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 退出登录确认弹窗 -->
    <div v-if="showLogoutModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click="hideLogoutModal">
      <div class="bg-white rounded-lg p-6 m-4 max-w-sm w-full" @click.stop>
        <h3 class="text-lg font-medium text-gray-900 mb-4">确认退出登录</h3>
        <p class="text-gray-600 mb-6">
          退出登录后需要重新验证手机号码才能使用应用功能。确定要退出吗？
        </p>
        <div class="flex space-x-3">
          <button
            @click="hideLogoutModal"
            class="flex-1 py-2 px-4 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
          >
            取消
          </button>
          <button
            @click="confirmLogout"
            class="flex-1 py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            确认退出
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useApi } from '~/utils/apiConfig'

// 响应式数据
const showLogoutModal = ref(false)

// API 实例
const api = useApi('freelancer')

// Auth composable
const { requireAuth } = useAuth()
const { showSuccess, showError, showWarning, showInfo } = useToast()

// 方法
const goBack = () => {
  window.history.back()
}

const showLogoutModalHandler = () => {
  showLogoutModal.value = true
}

const hideLogoutModal = () => {
  showLogoutModal.value = false
}

const confirmLogout = async () => {
  try {
    const response = await api.post('/logout')

    if (response.code === 0) {
      // 清除本地存储
      localStorage.removeItem('userToken')
      localStorage.removeItem('userInfo')

      showSuccess('退出登录成功')
      await navigateTo('/login')
    } else {
      showError(response.message || '退出登录失败，请重试')
    }
  } catch (error) {
    console.error('退出登录失败:', error)

    // 如果是401错误，说明token无效，直接清理并跳转
    if (error.status === 401 || error.statusCode === 401) {
      localStorage.removeItem('userToken')
      localStorage.removeItem('userInfo')
      showWarning('登录已过期，请重新登录')
      await navigateTo('/login')
    } else {
      // 其他错误，也清除本地存储
      localStorage.removeItem('userToken')
      localStorage.removeItem('userInfo')
      showInfo('已退出登录')
      await navigateTo('/login')
    }
  } finally {
    hideLogoutModal()
  }
}

// 页面加载时验证token
onMounted(async () => {
  await requireAuth()
})
</script>
